<template>
  <div class="article-card" @click.stop="handleClick">
    <div class="header">
      <img :src="item.avatar" alt="" />
      <div class="title">
        <p class="title-text">{{ item.stem }}</p>
        <p class="info">{{ item.creator }} | {{ item.createdAt }}</p>
      </div>
    </div>
    <div class="content">
      <p>{{ item.content }}</p>
    </div>
    <div class="footer">
      <span>点赞 {{ item.likeFlag }}</span> | <span>浏览 {{ item.views }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "ArticleCard",
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  methods: {
    handleClick() {
      this.$router.push(`/details/${this.item.id}`);
    },
  },
};
</script>

<style lang="less" scoped>
.article-card {
  border: (1/3.75vw) solid #ccc;
  width: 100%;
  margin: (10/3.75vw) 0 0;
  padding: (16/3.75vw);
  background-color: #fff;
  // 阴影
  box-shadow: 0 (4/3.75vw) (4/3.75vw) rgba(0, 0, 0, 0.1);
  &:first-child {
    margin-top: 0;
  }
  border-radius: (10/3.75vw);
  .header {
    display: flex;
    justify-content: space-start;
    align-items: center;
    width: 100%;
    height: (40/3.75vw);
    img {
      width: (40/3.75vw);
      height: (40/3.75vw);
    }
    div {
      .title-text {
        font-size: (16/3.75vw);
        // 多行文本省略
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      .info {
        color: #888;
        font-size: (14/3.75vw);
      }
    }
  }

  .content {
    margin: (16/3.75vw) 0;
    color: #333;
    // 多行文本省略
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .footer {
    color: #555;
    font-size: (14/3.75vw);
  }
}
</style>
